<#assign pageName="设置我的资料">
<@override name="head-styles">
    <style>
        .list-items {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .list-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 12px 0;
            border-bottom: 1px solid #f0f0f0;
        }
        .list-item-meta {
            align-items: flex-start;
            flex-direction: column;
        }
        .list-item-meta-title {
            margin-bottom: 4px;
            color: rgba(0,0,0,.65);
            font-size: 14px;
            line-height: 22px;
        }
        .list-item-meta-desc {
            color: rgba(0,0,0,.45);
            font-size: 14px;
            line-height: 22px;
        }
        .list-item-action {
           flex: 0 0 auto;
           margin-left: 48px;
           padding: 0;
           font-size: 0;
           list-style: none;
       }
       .list-item-action>li {
            position: relative;
            display: inline-block;
            padding: 0 8px;
            color: rgba(0,0,0,.45);
            font-size: 14px;
            line-height: 22px;
            text-align: center;
            cursor: pointer;
        }
    </style>
</@override> 
<@override name="page-content">
    <fieldset class="layui-elem-field layui-field-title">
        <legend>${pageName}</legend>
    </fieldset>
    <form class="layui-form" lay-filter="formUserBaseEdit">
        <div class="layui-tab layui-tab-vertical layui-tab-brief">
           <ul class="layui-tab-title">
             <li class="layui-this">基本信息</li>
             <li>安全设置</li>
             <li>关联帐号</li>
           </ul>
           <div class="layui-tab-content">
               <div class="layui-tab-item layui-show">
                   <div class="layui-hide-xs title">基本信息</div>
                   <@ctrl.Textbox path="userBase.nickName" labelText="用户昵称" class="width-190"/> 
                   <@ctrl.RadioList path="userBase.sex" options={'男':'男','女':'女'} labelText="用户性别" text=1 value=0 />
                   <@ctrl.Date path="userBase.birthday" labelText="出生日期" /> 
                   <div class="layui-form-item">
                       <div class="layui-inline">
                        <@ctrl.SingleSelect path="userBase.provinceNo" labelText="所在区域" options=listPro![] text="name" value="id" >
                            <option value="000000">请选择</option>
                        </@ctrl.SingleSelect> 
                       </div>
                       <div class="layui-inline">
                       <@ctrl.SingleSelect path="userBase.cityNo" labelText="请选择市" labelShow=false options=listCity text="name" value="id">
                           <option value="000000">请选择</option>
                       </@ctrl.SingleSelect>
                       </div>
                       <div class="layui-inline">
                       <@ctrl.SingleSelect path="userBase.regionNo" labelText="请选择县/区" labelShow=false options=listRegin text="name" value="id">
                           <option value="000000">请选择</option>
                       </@ctrl.SingleSelect>
                       </div>
                   </div>
                   <@ctrl.Textarea path="userBase.signature" labelText="个性签名" attributes="style='resize:vertical !important;'"/> 
                   <@ctrl.Hidden path="userBase.userId" /> 
                   <@ctrl.Hidden path="userBase.province" />
                   <@ctrl.Hidden path="userBase.city" /> 
                   <@ctrl.Hidden path="userBase.region" /> 
                   <@ctrl.Hidden path="userBase.areaNo"/> 
                   <@ctrl.Hidden path="userBase.avatar" />
                   <@ctrl.Hidden path="userBase.authType" />
                   <@ctrl.Hidden path="userBase.authStatus" /> 
                   <@ctrl.Hidden path="userBase.compId" /> 
                   <@ctrl.Hidden path="userBase.teamId" />
                   <@ctrl.FormAction buttons=['submit', 'reset']/>
               </div>
               <div class="layui-tab-item">
                   <div class="layui-hide-xs title">安全设置</div>
                   <div class="list-items">
                       <div class="list-item">
                           <div class="list-item-meta">
                               <div class="list-item-meta-title">
                                   <h4>账户密码</h4>
                               </div>
                               <div class="list-item-meta-desc">
                                    <div>当前密码强度:
                                        <span class="layui-bg-green status-show">强</span>
                                    </div>
                               </div>
                           </div>
                           <ul class="list-item-action">
                               <li class="list-item-action">
                                   <a class="js_pass-change">修改</a>
                               </li>
                           </ul>
                       </div>
                       <div class="list-item">
                           <div class="list-item-meta">
                               <div class="list-item-meta-title">
                                   <h4>手机号码</h4>
                               </div>
                               <div class="list-item-meta-desc">
                                    <div>已绑定手机:
                                        <span><#if loginMobile?length &gt; 8>${loginMobile?substring(0,3)}****${loginMobile?substring(8)}<#else>${loginMobile}</#if></span>
                                    </div>
                               </div>
                           </div>
                           <ul class="list-item-action">
                               <li class="list-item-action">
                                   <a class="js_mobile-binding"><#if loginMobile?has_content>修改<#else>绑定</#if></a>
                               </li>
                           </ul>
                       </div>
                       <div class="list-item">
                           <div class="list-item-meta">
                               <div class="list-item-meta-title">
                                   <h4>电子邮箱</h4>
                               </div>
                               <div class="list-item-meta-desc">
                                    <div>已绑定邮箱:
                                        <span><#if loginEmail?index_of('@') &gt; 3>${loginEmail?substring(0,3)}****${loginEmail?substring(loginEmail?index_of('@'))}</#if></span>
                                    </div>
                               </div>
                           </div>
                           <ul class="list-item-action">
                               <li class="list-item-action">
                                   <a class="js_email-binding"><#if loginEmail?has_content>修改<#else>绑定</#if></a>
                               </li>
                           </ul>
                       </div>
                   </div>
               </div>
               <div class="layui-tab-item">
                   <div class="layui-hide-xs title">关联帐号</div>
                   <div class="list-items">
                       <#if loginAccountList?has_content>
                       <#list loginAccountList as dataItem>
                       <div class="list-item">
                           <div class="list-item-meta">
                               <div class="list-item-meta-title">
                                   <h4>${dataItem.loginType}
                                       <#if loginAccountType == dataItem.loginType><span class="layui-bg-green status-show">当前登录</span></#if>
                                   </h4>
                               </div>
                               <div class="list-item-meta-desc">
                                    <div>账号登录名:
                                        <span>${dataItem.loginAccount}</span>
                                    </div>
                               </div>
                           </div>
                           <ul class="list-item-action">
                               <li class="list-item-action"></li>
                           </ul>
                       </div>
                       </#list>
                       </#if>
                   </div>
               </div>
           </div>
        </div>
        <!-- <div class="col-xs-12 col-md-3 col-sm-2 center">
            <span class="profile-picture" style="cursor: pointer; width: 200px;">
                <img class="editable img-responsive width-100" alt="头像" id="avatar2"
                src="${(userBase.avatarStr)!'${contextPath}/assets/images/person/profile.jpg'}" />
            </span>
            <div>（点击图片更换头像）</div>
        </div> -->
    </form>
</@override> 
<@override name="page-scripts"> 
    <script>
        var layer;
        $(function(){
            layui.use(['element','form','layer','laydate','jquery'], function(){
                layer=layui.layer;
                var element = layui.element;
                var form = layui.form;
                var laydate = layui.laydate;
                $=layui.jquery;
                laydate.render({
                    elem: '#birthday'
                });
                //监听提交
                form.on('submit(submit)', function(data){
                    submitData(data.field, '${contextPath}/admin/userbase/edit', function(){location.href="${contextPath}/admin/userbase/edit";});
                    return false;
                });
                /* 区域三级联动 */
                form.on('select(provinceNo)', function(data){
                     var proValue = data.value;
                     proValue = (proValue.length==6)?proValue:"000000";
                     var proText = (proValue!="000000")?data.elem[data.elem.selectedIndex].text:"";
                     var $city = "<option value='000000'>请选择市</option>";
                     var $region = "<option value='000000'>请选择县/区</option>";
                     if(proValue!="000000"){
                         $.post('${rc.getContextPath()}/codetable/city/'+proValue.substring(0,2)+'/query', {}, 
                             function(data){
                             $.each(data, function(index, item){
                                 $city += "<option value='" + item.id + "'>" + item.name + "</option>";
                             })
                             $("#cityNo").html($city);
                             $("#regionNo").html($region);
                             form.render("select");
                         })
                     }
                     $("#province").val(proText);
                     $("#cityNo").trigger("change");
                 });
                 form.on('select(cityNo)',function(data){
                     var cityValue =  data.value;
                     cityValue = (cityValue.length==6)?cityValue:"000000";
                     var cityText = (cityValue!="000000")?data.elem[data.elem.selectedIndex].text:"";
                     var $region = "<option value='000000'>请选择县/区</option>";
                     if(cityValue!="000000"){
                         $.post('${rc.getContextPath()}/codetable/region/'+cityValue.substring(0,4)+'/query', {}, 
                             function(data){
                             $.each(data, function(index, item){
                                 $region += "<option value='" + item.id + "'>" + item.name + "</option>";
                             })
                             $("#regionNo").html($region);
                             form.render("select");
                         })
                     }
                     $("#city").val(cityText);
                     $("#regionNo").trigger("change");
                 });
                 form.on('select(regionNo)', function(data){
                     var regionValue =  data.value;
                     regionValue = (regionValue.length==6)?regionValue:"000000";
                     var regionText = (regionValue!="000000")?data.elem[data.elem.selectedIndex].text:"";
                     $("#region").val(regionText);
                     $("#areaNo").val(regionValue);
                     $("#address").val($("#province").val()+$("#city").val()+regionText);
                 });
                 $('.js_pass-change').on('click', function(){
                     openPane("账户密码修改","${contextPath}/admin/users/editpwd");
                 });
                 $('.js_mobile-binding').on('click', function(){
                     openPane("手机号绑定","${contextPath}/admin/binding/mobile");
                 });
                 $('.js_email-binding').on('click', function(){
                     openPane("电子邮箱绑定","${contextPath}/admin/binding/email");
                 });
            });
        })
        function openPane(head, url){
            layer.open({
                type: 2,
                title:head,
                area: ['480px', '360px'],
                anim: 2,
                maxmin: false,
                closeBtn: 1,
                shadeClose: true,
                shade: 0.6,
                content: url
             })
        }

        $('#validate').on('click',function(){
            $('#validate-box').modal();
        })
        
        $('#avatar2').on('click', function(){
            var modal = 
            '<div class="modal fade">\
              <div class="modal-dialog">\
               <div class="modal-content">\
                <div class="modal-header">\
                    <button type="button" class="close" data-dismiss="modal">&times;</button>\
                    <h4 class="blue">修改头像</h4>\
                </div>\
                \
                <form class="no-margin" method="post" action="">\
                 <div class="modal-body">\
                    <div class="space-4"></div>\
                    <div style="width:75%;margin-left:12%;"><input type="file" name="file-input"  accept="image/*" capture="camera"/></div>\
                 </div>\
                \
                 <div class="modal-footer center">\
                    <button type="submit" class="btn btn-sm btn-success"><i class="ace-icon fa fa-check"></i> 确定</button>\
                    <button type="button" class="btn btn-sm" data-dismiss="modal"><i class="ace-icon fa fa-times"></i> 取消</button>\
                 </div>\
                </form>\
              </div>\
             </div>\
            </div>';
            
            
            var modal = $(modal);
            modal.modal("show").on("hidden", function(){
                modal.remove();
            });
        
            var working = false;
        
            var form = modal.find('form:eq(0)');
            var file = form.find('input[type=file]').eq(0);
            file.ace_file_input({
                style:'well',
                btn_choose:'点击此处选择新头像',
                btn_change:null,
                no_icon:'ace-icon fa fa-picture-o',
                thumbnail:'fit',
                before_remove: function() {
                    //don't remove/reset files while being uploaded
                    return !working;
                },
                allowExt: ['jpg', 'jpeg', 'png', 'gif'],
                allowMime: ['image/jpg', 'image/jpeg', 'image/png', 'image/gif']
            });
        
            form.on('submit', function(){
                if(!file.data('ace_input_files')) return false;
    
                file.ace_file_input('disable');
                form.find('button').attr('disabled', 'disabled');
                form.find('.modal-body').append("<div class='center'><i class='ace-icon fa fa-spinner fa-spin bigger-150 orange'></i></div>");
                
                var deferred = new $.Deferred;
                working = true;
                deferred.done(function() {
                    form.find('button').removeAttr('disabled');
                    form.find('input[type=file]').ace_file_input('enable');
                    form.find('.modal-body > :last-child').remove();
                    
                    modal.modal("hide");
        
                    var thumb = file.next().find('img').data('thumb');
                    jQuery("#avatar").val(thumb);
                    if(thumb) $('#avatar2').get(0).src = thumb;
        
                    working = false;
                });
                
                setTimeout(function(){
                    deferred.resolve();
                } , parseInt(Math.random() * 800 + 800));
        
                return false;
            });
        });
    </script> 
</@override> 
<@extends name="/layout/basepage.html"/> 